<template>
	<view class="reward-container">
		<!-- 顶部背景 -->
		<view class="top-bg">
			<image src="http://xlnc.oss-cn-shenzhen.aliyuncs.com/uploads/1745920433448.png" mode="aspectFill"></image>
		</view>

		<!-- 主要内容 -->
		<view class="content-box">
			<!-- 奖励统计 -->
			<view class="info-card stats-card">
				<view class="card-title">
					<text>奖励统计</text>
				</view>
				<view class="stats-content">
					<view class="stat-item">
						<text class="stat-number">{{ formatMoney(rewardInfo.total_reward) }}</text>
						<text class="stat-label">总奖励(元)</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ formatMoney(rewardInfo.withdrawn) }}</text>
						<text class="stat-label">已提现(元)</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ formatMoney(rewardInfo.available) }}</text>
						<text class="stat-label">可提现(元)</text>
					</view>
				</view>
				<!-- 修改提现按钮部分 -->
				<view class="button-group">
					<button class="withdraw-btn" :disabled="rewardInfo.available <= 0"
						@click="gotoWithdrawPage">提现</button>
					<button class="setting-btn" @click="gotoPaySet">提现设置</button>
				</view>
			</view>

			<!-- 提现记录 -->
			<view class="info-card records-card">
				<view class="card-title">
					<text>提现记录</text>
				</view>
				<view class="records-content">
					<view class="record-header">
						<text class="header-item">金额</text>
						<text class="header-item">方式</text>
						<text class="header-item">状态</text>
						<text class="header-item">时间</text>
					</view>
					<view class="record-list">
						<view class="record-item" v-for="(item, index) in withdrawRecords" :key="index">
							<text class="record-amount">{{ formatMoney(item.bal) }}</text>
							<text class="record-method">{{ getPayType(item.pay_type) }}</text>
							<text class="record-status" :style="{ color: getStatusColor(item.status) }">{{
								getStatusText(item.status) }}</text>
							<text class="record-time">{{ formatTime(item.c_time) }}</text>
						</view>
						<view class="empty-tip" v-if="withdrawRecords.length === 0">
							<text>暂无提现记录</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提现对话框 -->
		<!-- 修改后的提现对话框 -->
		<!-- 确保弹出层有足够高的z-index -->
		<u-popup v-model="showWithdrawPopup" mode="center" :safe-area-inset-bottom="true" class="custom-popup">

			<view class="withdraw-dialog">
				<view class="dialog-title">提现申请</view>
				<view class="dialog-content">{{ withdrawContent }}</view>
				<view class="withdraw-form">
					<view class="form-item">
						<text class="form-label">提现金额</text>
						<input class="form-input" type="digit" v-model="withdrawAmount" placeholder="请输入提现金额" />
					</view>
					<view class="form-item">
						<text class="form-label">提现方式</text>
						<picker class="form-picker" @change="bindPickerChange" :value="payTypeIndex" :range="payTypes">
							<view class="picker">{{ payTypes[payTypeIndex] }}</view>
						</picker>
					</view>
				</view>
				<view class="dialog-btns">
					<button @click="closeWithdrawDialog">取消</button>
					<button @click="confirmWithdraw">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showWithdrawPopup: false, // 新增控制变量
			rewardInfo: {
				total_reward: 0,
				withdrawn: 0,
				available: 0
			},
			withdrawRecords: [],
			withdrawAmount: '',
			payTypeIndex: 0,
			payTypes: ['微信', '支付宝', '银行卡'],
			bankCardNumber: '',
			bankName: '',
			alipayAccount: '',
			withdrawContent: '请输入提现金额和方式'
		}
	},
	onLoad() {
		this.getRewardInfo();
		this.getWithdrawRecords();
	},
	methods: {
		// 跳转到提现申请页面
		gotoWithdrawPage() {
			uni.navigateTo({
				url: '/pagesA/my/tools/apply_tixian?available=' + this.rewardInfo.available
			});
		},
		testButton() {
			console.log("按钮被点击");
			this.showWithdrawDialog();
		},
		showWithdrawDialog() {
			this.withdrawAmount = this.rewardInfo.available.toFixed(2);
			this.showWithdrawPopup = true; // 改为使用 v-model 控制
		},
		closeWithdrawDialog() {
			this.showWithdrawPopup = false; // 改为使用 v-model 控制
		},
		formatMoney(value) {
			return parseFloat(value).toFixed(2);
		},
		formatTime(time) {
			if (!time) return '';
			return time.split(' ')[0];
		},
		getPayType(type) {
			const types = {
				1: '微信',
				2: '支付宝',
				4: '银行卡'
			};
			return types[type] || '未知';
		},
		getStatusText(status) {
			const statusMap = {
				0: '已拒绝',
				1: '处理中',
				2: '已到账'
			};
			return statusMap[status] || '未知';
		},
		getStatusColor(status) {
			const colors = {
				0: '#f56c6c',
				1: '#e6a23c',
				2: '#67c23a'
			};
			return colors[status] || '#909399';
		},
		bindPickerChange(e) {
			this.payTypeIndex = e.detail.value;
		},
		async getRewardInfo() {
			const launch = uni.getStorageSync('my_info');
			const res = await this.$myRuquest({
				url: '/index/api/getRewardInfo',
				data: {
					"user_id": launch.id,
				},
			});
			if (res.data.code == 200) {
				this.rewardInfo = res.data.data;
			}
		},
		async getWithdrawRecords() {
			const launch = uni.getStorageSync('my_info');
			const res = await this.$myRuquest({
				url: '/index/api/getWithdrawRecords',
				data: {
					"user_id": launch.id,
					"limit": 10
				},
			});
			if (res.data.code == 200) {
				this.withdrawRecords = res.data.data;
			}
		},
		async confirmWithdraw() {
			if (!this.withdrawAmount || parseFloat(this.withdrawAmount) <= 0) {
				uni.showToast({
					title: '请输入有效的提现金额',
					icon: 'none'
				});
				return;
			}

			if (parseFloat(this.withdrawAmount) > this.rewardInfo.available) {
				uni.showToast({
					title: '提现金额不能超过可提现余额',
					icon: 'none'
				});
				return;
			}

			const launch = uni.getStorageSync('my_info');
			const params = {
				user_id: launch.id,
				amount: parseFloat(this.withdrawAmount),
				pay_type: this.payTypeIndex + 1 // 前端索引从0开始，后端从1开始
			};

			const res = await this.$myRuquest({
				url: '/index/api/applyWithdraw',
				method: 'POST',
				data: params
			});

			if (res.data.code == 200) {
				uni.showToast({
					title: '提现申请已提交',
					icon: 'success'
				});
				this.closeWithdrawDialog();
				// 刷新数据
				this.getRewardInfo();
				this.getWithdrawRecords();
			} else {
				uni.showToast({
					title: res.data.info || '提现申请失败',
					icon: 'none'
				});
			}
		},

		// 新增提现设置跳转方法
		gotoPaySet() {
			uni.navigateTo({
				url: '/pagesA/my/tools/payset'
			});
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}

.reward-container {
	.top-bg {
		height: 200rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content-box {
		padding: 0 30rpx;
		margin-top: -60rpx;
		position: relative;
		z-index: 2;
	}

	.info-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 30rpx;
				background-color: #f14399;
				border-radius: 4rpx;
			}
		}
	}

	.stats-card {
		.stats-content {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.stat-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.stat-number {
					font-size: 36rpx;
					font-weight: bold;
					// color: #00a300;
					margin-bottom: 10rpx;
				}

				.stat-label {
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		// .withdraw-btn {
		// 	background-color: rgb(241, 67, 153);
		// 	color: #fff;
		// 	border-radius: 50rpx;
		// 	font-size: 30rpx;
		// 	height: 80rpx;
		// 	line-height: 80rpx;
		// 	margin-top: 20rpx;

		// 	&[disabled] {
		// 		background-color: #cccccc;
		// 		color: #999999;
		// 	}
		// }


		.button-group {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.withdraw-btn {
				flex: 1;
				margin-right: 15rpx;
				background-color: rgb(241, 67, 153);
				color: #fff;
				border-radius: 50rpx;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;

				&[disabled] {
					background-color: #cccccc;
					color: #999999;
				}
			}

			.setting-btn {
				flex: 1;
				margin-left: 15rpx;
				background-color: #f8f8f8;
				color: #666;
				border-radius: 50rpx;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				border: 1rpx solid #ddd;
			}
		}
	}

	.records-card {
		.records-content {
			.record-header {
				display: flex;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;
				font-weight: bold;
				font-size: 28rpx;
				color: #333;

				.header-item {
					flex: 1;
					text-align: center;

					&:first-child {
						text-align: left;
					}

					&:last-child {
						text-align: right;
					}
				}
			}

			.record-list {
				.record-item {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #f5f5f5;
					font-size: 26rpx;
					color: #666;

					.record-amount,
					.record-method,
					.record-status,
					.record-time {
						flex: 1;
						text-align: center;

						&:first-child {
							text-align: left;
						}

						&:last-child {
							text-align: right;
						}
					}
				}

				.empty-tip {
					text-align: center;
					padding: 40rpx 0;
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}

	.withdraw-form {
		padding: 20rpx;

		.form-item {
			margin-bottom: 30rpx;

			.form-label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
			}

			.form-input,
			.form-picker {
				height: 80rpx;
				border: 1rpx solid #ddd;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				background-color: #fff;
			}

			.picker {
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
}

.withdraw-dialog {
	width: 600rpx;
	padding: 40rpx;
	background-color: #fff;
	border-radius: 16rpx;
	position: relative;
	z-index: 1000;
}

/* 添加遮罩层样式 */
.u-popup {
	z-index: 9999 !important;
}

/* 添加以下样式 */
.test-button {
	position: relative;
}

.custom-popup {
	z-index: 99999 !important;
}

.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.popup-content {
	background-color: #fff;
	width: 80%;
	border-radius: 10rpx;
	padding: 30rpx;
}

.stats-card {
	// 原有样式保持不变...
}
</style>